import React from "react";
import {MenuItemPropType, MenuItemStateType, MenuItemType} from './DataType'
import './index.css'
import {NavLink} from "react-router-dom";
import {CaretUpOutlined, CaretDownOutlined} from "@ant-design/icons"
import SubMenuItem from "@/components/menu/SubMenuItem";

export default class MenuItem extends React.Component<MenuItemPropType, MenuItemStateType> {
    state = {
        width: "",
        opacity: 1,
        collapsed: true
    }
    componentDidMount() {
        this.setState({collapsed:true})
        if (this.props.collapsed)
            this.setState({width: "0px"})
        else this.setState({width: "150px"})

    }
    handleCollapsed = () => {
        if(!this.props.collapsed)
            if(this.state.collapsed)
                this.setState({
                    collapsed:false
                })
            else
                this.setState({
                    collapsed:true
                })
    }
    componentDidUpdate(prevProps: Readonly<MenuItemPropType>, prevState: Readonly<MenuItemStateType>, snapshot?: any) {
        if (this.props.collapsed) {
            this.state.width = "0"
            this.state.opacity = 0
            this.state.collapsed = true
        } else {
            this.state.width = "150px"
            this.state.opacity = 1
        }
    }

    noChildren = () => {
        return (
            <NavLink to={this.props.MenuItem.path} className={'menu-item'}>
                <div className={'icon'}>
                    {this.props.MenuItem.icon}
                </div>
                <div className={'title'} style={{width: this.state.width, opacity: this.state.opacity}}>
                    <span className={'title__text'}>
                       {this.props.MenuItem.name}
                    </span>
                </div>
            </NavLink>
        )
    }

    hasChildren = () => {
        return (
            <>
                <div className={'menu-item'} onClick={this.handleCollapsed}>
                    <div className={'icon'}>
                        {this.props.MenuItem.icon}
                    </div>
                    <div className={'title'} style={{width: this.state.width, opacity: this.state.opacity}}>
                       <span className={'title__text'}>
                           {this.props.MenuItem.name}
                       </span>
                        <span>
                                {
                                    this.state.collapsed ? <CaretDownOutlined/> : <CaretUpOutlined/>
                                }
                       </span>
                    </div>
                </div>
                {/*{*/}
                {/*    this.state.collapsed?<></>:*/}
                {/*        <div className={'children-list'} >*/}
                {/*            {*/}
                {/*                this.props.MenuItem.children.map((item: MenuItemType) => {*/}
                {/*                    return (*/}
                {/*                        <SubMenuItem MenuItem={item} collapsed={this.state.collapsed} key={item.path}/>*/}
                {/*                    )*/}
                {/*                })*/}
                {/*            }*/}
                {/*        </div>*/}
                {/*}*/}
                <div className={'children-list'}>
                    {
                        this.props.MenuItem.children.map((item: MenuItemType) => {
                            return (
                                <SubMenuItem MenuItem={item} collapsed={this.state.collapsed} key={item.path}/>
                            )
                        })
                    }
                </div>
            </>
        )
    }

    render() {
        return (
            <>
                {
                    this.props.MenuItem.children.length === 0 ?
                        this.noChildren()
                        :
                        this.hasChildren()
                }
            </>
        );
    }
}